<template>
  <div class="my-bg">
    <!-- <div class="msg-header">我的</div> -->

    <div class="my-header">
      <div class="avatar-gradient">
        <img class="my-avatar" :src="user.avatar" />
      </div>
      <div class="my-nickname">
        {{ user.name }}
        <span class="my-badge">超级管理员</span>
      </div>
      <div class="my-desc">{{ user.dept }}</div>
    </div>
    <div class="my-info-card">
      <div class="info-row">
        <span>手机号</span><span>{{ user.phone }}</span>
      </div>
      <div class="info-row">
        <span>邮箱</span><span>{{ user.email }}</span>
      </div>
      <div class="info-row">
        <span>部门</span><span>{{ user.dept }}</span>
      </div>
    </div>
    <div class="my-menu">
      <div
        class="menu-item"
        v-for="item in menuList"
        :key="item.text"
        @click="onMenu(item)"
      >
        <van-icon :name="item.icon" class="menu-icon" />
        <span>{{ item.text }}</span>
        <van-icon name="arrow" class="menu-arrow" />
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "my",
  data() {
    return {
      user: {
        name: "管理员",
        avatar: "https://picsum.photos/200/200?random=1",
        phone: "13900000001",
        email: "admin@example.com",
        dept: "研发中心",
      },
      menuList: [
        { text: "我的申请", icon: "edit" },
        { text: "我的待办", icon: "todo-list-o" },
        { text: "设置", icon: "setting-o" },
        { text: "退出登录", icon: "log-out" },
      ],
    };
  },
  methods: {
    onMenu(item) {
      if (item.text === "退出登录") {
        localStorage.removeItem("token");
        this.$toast("已退出登录");
        this.$router.replace("/login");
        return;
      }
      this.$toast(item.text + " 功能开发中...");
    },
  },
};
</script>

<style scoped>
.my-bg {
  /* min-height: 100vh; */
  background: #fff;
  padding-bottom: 0;
}
.msg-header {
  background: #1677ff;
  color: #fff;
  font-size: 22px;
  font-weight: bold;
  text-align: center;
  padding: 18px 0 12px 0;
  letter-spacing: 2px;
  position: relative;
}
.my-header {
  background: #1677ff;
  padding: 36px 0 18px 0;
  text-align: center;
  color: #fff;
  border-radius: 0 0 24px 24px;
  box-shadow: 0 2px 12px #1677ff22;
  position: relative;
}
.avatar-gradient {
  display: inline-block;
  padding: 3px;
  background: linear-gradient(135deg, #42d0ea 0%, #e0f7fa 100%);
  border-radius: 50%;
  margin-bottom: 8px;
  box-shadow: 0 2px 12px #42d0ea33;
}
.my-avatar {
  width: 76px;
  height: 76px;
  border-radius: 50%;
  border: 3px solid #fff;
  object-fit: cover;
  background: #fff;
  display: block;
}
.my-nickname {
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.my-badge {
  background: linear-gradient(90deg, #42d0ea 0%, #1677ff 100%);
  color: #fff;
  font-size: 12px;
  border-radius: 8px;
  padding: 2px 8px;
  margin-left: 4px;
  font-weight: 400;
  letter-spacing: 1px;
  box-shadow: 0 1px 4px #1677ff33;
}
.my-desc {
  font-size: 14px;
  color: #e0f7fa;
}
.my-info-card {
  background: #fff;
  margin: 18px 16px 0 16px;
  border-radius: 16px;
  box-shadow: 0 4px 16px #1677ff11;
  padding: 14px 18px;
  border: 1px solid #e0f7fa;
  position: relative;
  z-index: 1;
}
.info-row {
  display: flex;
  justify-content: space-between;
  font-size: 15px;
  color: #333;
  padding: 10px 0;
  border-bottom: 1px solid #f2f2f2;
}
.info-row:last-child {
  border-bottom: none;
}
.my-menu {
  margin: 22px 16px 0 16px;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 4px 16px #1677ff11;
  overflow: hidden;
  border: 1px solid #e0f7fa;
  position: relative;
  z-index: 1;
}
.menu-item {
  display: flex;
  align-items: center;
  padding: 16px 10px 16px 18px;
  font-size: 16px;
  color: #333;
  border-bottom: 1px solid #f2f2f2;
  cursor: pointer;
  transition: background 0.2s, box-shadow 0.2s;
  position: relative;
  overflow: hidden;
}
.menu-item:last-child {
  border-bottom: none;
}
.menu-item:hover {
  background: #e0f7fa44;
  box-shadow: 0 2px 8px #42d0ea22;
}
.menu-item:active::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background: #42d0ea22;
  pointer-events: none;
}
.menu-icon {
  font-size: 22px;
  margin-right: 14px;
  color: #1677ff;
}
.menu-arrow {
  margin-left: auto;
  color: #bbb;
  font-size: 18px;
}
</style>